<template>
  <template v-if="roles === 'admin'">
    <div class="frame">
      <div class="column">
        <div class="logo">
          <img src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192040842.png">
          <p>山西综改股权投资<br>数字化投资管理系统</p>
        </div>

        <ManageMenuItem></ManageMenuItem>
      </div>

      <div class="right-content">
        <ManageAppHeader></ManageAppHeader>

        <div class="main-content">
          <RouterView></RouterView>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="frame">
      <div class="column">
        <div class="logo">
          <img src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192040842.png">
          <p>山西综改股权投资<br>数字化投资管理系统</p>
        </div>
        <UserMenuItem></UserMenuItem>
      </div>

      <div class="right-content">
        <UserAppHeader></UserAppHeader>

        <div class="main-content">
          <RouterView></RouterView>
        </div>
      </div>
    </div>
  </template>
</template>
<script setup lang="ts" name="App">
import ManageMenuItem from '@/components/ManageMenuItem.vue'
import UserMenuItem from '@/components/UserMenuItem.vue'
import ManageAppHeader from '@/components/ManageAppHeader.vue'
import UserAppHeader from '@/components/UserAppHeader.vue'
import request from '@/utils/http'
import { onMounted, ref } from 'vue'

interface UserRoleResponse {
  code: string
  data: {
    roles: string[]
  }
}
const roles = ref<string>('')
onMounted(() => {
  getCheck()
})
async function getCheck() {
  try {
    const response = await request.get('/auth/user/info') as UserRoleResponse;
    console.log(response);
    const userRoles = response.data.roles;
    if (response.code === '0') {
      roles.value = userRoles[0];
      console.log(roles.value);

    }
  } catch (error) {
    console.error('获取用户角色失败：', error);
    roles.value = 'user';
  }
}
</script>

<style scoped>
.frame {
  display: flex;
  width: 1920px;
  height: 1080px;
  background-color: #F6F8FC;
}

.column {
  width: 260px;
  margin-right: 12px;
  background-color: #F6F8FC;
}

.logo {
  height: 117px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  padding: 0 15px;
}

.logo img {
  margin-right: 15px;
}

.logo p {
  margin-top: 10px;
  color: #006DB8;
  font-size: 18px;
}

.right-content {
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  background-color: #FFFFFF;
}
</style>